<template>
	<view>
		<view class="text_line"></view>	
	<view class="myreserve" v-for="(item,index) in listData" :key="index">
	<view style="display: flex;flex-direction: column;">
		<view style="margin-left: 15px;margin-top: 10px;">{{item.homestayName}}</view>
		<image :src="`http://192.168.2.125:8086/business/common2/download?name=${item.picture}`" mode="aspectFill" style="background-color: aqua;margin-top: 10px;"></image>
		</view>
		<view style="flex-direction: column;flex-grow: 1;">
			<view style="margin-left: 70%;font-size: 13px;width: 100%;" v-if="item.orderStatus===1 && item.orderType===10">待付款</view>
		   <view style="margin-left: 70%;font-size: 13px;width: 100%;" v-else-if="item.orderStatus===1 && item.orderType===11">已付款</view>
			<view style="margin-left: 60%;font-size: 13px;width: 100%;" v-else-if="item.orderStatus===30">等待商家确定</view>
			<view style="margin-left: 70%;font-size: 13px;width: 100%;" v-else>已完成</view>
		<view class="name">
			<text class="name1">{{item.goodsName}}</text>
	        <text class="price">￥{{item.goodsPrice}}</text>
		</view>
		<view class="detail">
			<text class="creat_time">{{item.createTime}}</text>
			<view v-if="item.goodsType===1">
		    <text class="sum">数量：×{{item.goodsNum}}</text>
			</view>
		</view>
		<view style="margin-left: 120px;margin-top: 30px;">共计:{{(((+item.goodsPrice) * (+item.goodsNum)).toFixed(2)-((+item.couponNum) * (+item.couponSubsidy)).toFixed(2)).toFixed(2)}}</view>
		<view class="button_choose">
			<view v-if="item.orderStatus===2">
		<button size="mini" type="default" 
			style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 15px;"  
			@tap="refund(index)">退款</button>
	         
		<button v-if="item.score!=(-1)" size="mini" type="default"
			style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 5px;"  
			@click="score(item)" >评分</button>
			<button size="mini" type="default"
				style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 5px;"  
				@click="look_info(item.id)">查看详情</button>
				</view>
				
				<view v-else-if="item.orderStatus===1 && item.orderType===10">
					<button size="mini" type="default"
						style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 15px;"  
						@click="pay(index)">点击支付</button>
						<button size="mini" type="default"
							style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 10px;"  
							@click="look_info(item.id)">查看详情</button>
				</view>
				<view v-else-if="item.orderStatus===1 && item.orderType===11">
					<button size="mini" type="default"
						style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 15px;"  
						@click="confirm(index)">确认收货</button>
						<button size="mini" type="default"
							style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 10px;"  
							@click="look_info(item.id)">查看详情</button>
				</view>
				
				<view v-else>
					<button size="mini" type="default"
						style="color:#ffffff;backgroundColor:#ffffff;color: black;margin-left: 100px;"  
						@click="look_info(item.id)">查看详情</button>
				</view>
				
		</view>
		</view>
	</view>
    <view class="form-container" v-if="ScoreForm">
      <input type="text" v-model="Score.score" placeholder="分数" />
    <view style="display: flex;flex-direction: row;margin-top: 12px;">
     <button @click="SubmitScore">提交</button>
     <button @click="ScoreForm = false">取消</button>
	 </view>
    </view>
	</view>
</template>

<script>
	export default {
	
		props :{
			listData:{},
			
		},
		data() {
			return {
				Token:{
					"token":'',
				},
				buttonRect: {},
				detail:{
				},
				Text:'1111',
				ScoreForm:false,
				Score:{
					"score":'',
				},
				OrderMsg:{
					
				},
				NowOrder:{
					
				}
		}
		},
		onLoad() {
			if(item.orderStatus===2)
			this.Text="已完成；";
			console.log(uni.getStorageSync('login-user').token);
			this.Token.token=uni.getStorageSync('login-user').token;
			console.log(this.Token.token);
			
		},
		methods: {
			look_info(OrderId){
				
				uni.navigateTo({
				      url: '/pages/order/detail?OrderId='+OrderId
				    });	
			},
			
			refund(index) {
				this.OrderMsg=this.listData[index];
			  const that = this;
			  const itemList = ['价格太高', '评分过低', '等待时间过长', '其他'];
			  uni.showActionSheet({
			    title: '退款原因',
			    itemList: itemList,
			    popover: {
			      top: that.buttonRect.top * 2 + that.buttonRect.height,
			      left: that.buttonRect.left + that.buttonRect.width / 2
			    },
			    success: (actionSheetRes) => {
			      console.log(itemList[actionSheetRes.tapIndex]);
				  this.OrderMsg.reason=itemList[actionSheetRes.tapIndex];
			      // 检测用户是否点击了 '其他'
			      if(itemList[actionSheetRes.tapIndex] === '其他') {
			        // 如果是 '其他'，则弹出输入框让用户输入原因
			        uni.showModal({
			          title: '请输入其他原因',
			          editable: true, // 让对话框的内容可编辑
			          success: (modalRes) => {
			            if (modalRes.confirm && modalRes.content) {
			             console.log('用户输入的其他原因是:', modalRes.content);
						 this.OrderMsg.orderType=30;
			             this.OrderMsg.reason=modalRes.content;
						 uni.request({
						  	url:'http://192.168.2.125:8086/business/user/refund',
						  	method:'POST',
						 	header: {
						 	        'token': uni.getStorageSync('login-user').token // 在这里设置请求头
						 	    },
						 	data:this.OrderMsg,
						  	// 返回成功的结果
						  	success(res){	
						 	uni.showToast({
						 		icon:'success',
								title:res.data.data,
						 	})
						 	},
						  	fail() {
						  		console.log("获取失败")
						  	},
						  })
			            } else if (modalRes.cancel) {
			              console.log('用户取消输入其他原因');
			            }
			          }
			        });
			      } else {
					  this.OrderMsg.orderStatus=30;
			       uni.request({
			        	url:'http://192.168.2.125:8086/business/user/refund',
			        	method:'POST',
			       	header: {
			       	        'token': uni.getStorageSync('login-user').token// 在这里设置请求头
			       	    },
			       	data:this.OrderMsg,
			        	// 返回成功的结果
			        	success(res){
							uni.showToast({
								icon:'success',
								title:res.data.data,
							})
			       		
			       	},
			        	fail() {
			        		console.log("获取失败")
			        	},
			        })
			      }
			    }
			  });
			},

			score(Order){
			
				uni.setStorageSync('OderMsg',Order);
				uni.navigateTo({
				      url: '/pages/order/order_score?OrderId='+Order.id
				    });	
			},
			
			pay(index){
				uni.navigateTo({
					url:'/pages/order/pay?message='+JSON.stringify(this.listData[index])
				})
			},
			confirm(index){
				console.log(this.Token.token);
				this.NowOrder=this.listData[index];
				this.NowOrder.orderStatus=2;
				this.NowOrder.orderType=21;
				console.log(JSON.stringify(this.listData[index]))
				uni.request({
				 	url:'http://192.168.2.226:8086/business/user/confirmReceipt',
				 	method:'POST',
					header: {
						'token': uni.getStorageSync('login-user').token
					    },
					data:this.NowOrder,
				 	// 返回成功的结果
				 	success(res){
							uni.showToast({
							icon:'success',
							title:'收货成功',
							duration:2000
											})
						
					},
				 	fail() {
				 		console.log("获取失败")
				 	},
				 })
			}
			
		},
	}
	
</script>
<style>
	.form-container button{
		height: 50px;
	}

	.myreserve{
			display: flex;
			padding: 15px;
			box-shadow: 0 0 8rpx 6rpx rgba(143, 143, 143, 0.25);

	}
	.myreserve .name{
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
		/* 均匀分布 */
		justify-content: space-evenly;
		
	}
	.myreserve image{
		width: 80px;
		height: 80px;
		margin-right: 20px;
	}
	.name1{
		font-size: 13px;
		font-weight: 500;
	}
	.price{
	    margin-left: 60px;
		font-size: 15px;
		font-weight: 900;
		color: red;
		

	}
	.reserve{
	    font-size: 15px;
		width: 30%;
		margin-top: 50px;
		margin-left: 30px;

	}
	.detail {
		margin-left: 20px;
		margin-top: 5px;
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
	

		
	}
	.button_choose {
        margin-top: 20px;
		display: flex;
		/* 竖直排布 */
		flex-direction: row;
		/* 均匀分布 */
		margin-left: -15px;
		
	} 
	.creat_time{
		margin-top: 10px;
		font-size: 10px;
	    font-weight: 200;
		margin-left: 0px;
	  }
    .sum{
		margin-top: 20px;
		margin-left:10px;
		font-size: 10px;
		font-weight: 500;
	  }
	 .text_line{
	 
	 /*盒子下边距，这里用来指定下划线距离文字的高度*/
	 padding-bottom: 0px;
	 		
	 /*设定一个2px，实线*/
	 border-bottom: 1.3px solid #e3e3e3; 
	 }

</style>